<template>
	<view class="cu-card case margin-tb-xl" :class="{'borders radius':border}">
		<view :class="bg" class="cu-item shadow padding" style="margin:0;">
			<!-- 支持开通的设备 -->
			<view class="text-lg text-black text-bold ">{{$t('JLink.deviceMessage.supportedDevices')}}（{{lists.length}}）</view>
			<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item text-center" style="margin:0 5px ;padding:30upx 0 0 0;width:33.33%;height:100%;position:relative" v-for="(item,index) in lists" :key="index" @tap="handleClick(item,index)"  :data-id="index">
					<view class="bg-img padding-top radius" :class="{'bg-device-select':TabCur==index}">
						<image :src="item.devIcon ? item.devIcon : `https://statics.xmcsrv.net/weixin/cloud/device/type/large/${item.devState ? item.icon+'-1' :item.icon }.svg`" style="width:5.2em;height:4.7em;" mode="aspectFit"></image>
					</view>
					<view class="line-one padding-lr-xs " :class="judgeWords(item.devName) ? 'scrolling-content' : ''"  style="line-height: 50upx;">
						<span :class="item.devState? 'text-black':'text-gray'">{{item.devName}}</span></view>
<!--					:class="item.devState? 'text-black':'text-gray'"-->
					<!-- 多通道 -->
					<view v-if="item.channelsArr&&item.channelsArr.length">
						<!-- 未开通 -->
						<view v-if="!item.normalUseChannel && !item.expireUseChannel" class="unActive bg-orange text-xs">{{$t('JLink.deviceMessage.unBuy')}}<view class="san_unbuy"></view></view>
						<!-- 已过期 -->
						<view v-else-if="item.expireUseChannel && item.normalUseChannel===0 " class="unActive bg-reds text-xs">{{$t('JLink.publicText.expired')}}<view class="san_expire"></view></view>
					</view>
					<!-- 单通道 -->
					<view v-else>
						<!-- 未开通 -->
						<view v-if="!item.expireTime" class="unActive bg-orange text-xs">{{$t('JLink.deviceMessage.unBuy')}}<view class="san_unbuy"></view></view>
						<!-- 已过期 -->
						<view v-else-if="item.expirationtimeColor==='reds'" class="unActive bg-reds text-xs">{{$t('JLink.publicText.expired')}}<view class="san_expire"></view></view>
					</view>
				</view>
			</scroll-view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		// 设备
		supportDeviceObj:{
			type:Object,
			default:()=>{
				return {}
			}
		},
		// 边框
		border:{
			type:Boolean,
			default:false
		},
		bg:{
			type:String,
			default:'bg-background'
		}
	},
    data() {
	    return {
			scrolling:false,
			lists:[],
			TabCur:-1,
			scrollLeft:0
		}
	},
	watch: {
		supportDeviceObj: {
			handler(newVal) {
				this.lists = newVal.supportDevice
				this.TabCur=newVal.TabCur
				this.scrollLeft=newVal.scrollLeft
			},
			immediate: true,
			deep: true
		}
	},
	onShow() {
	},
	methods: {
		handleClick(item,index){
		   this.$emit('click',item,index)
		},
		judgeWords(str){
			if(str.length > 8){
				return true
			}else{
				return false
			}
		}
	}
}
</script>
	
<style lang="less" scoped>
@import '@/common/style/main.css';
.bg-device-select{
	background-color: #ededed;
}
.unActive{
	position:absolute;
	top:10upx;
	right:-0.9rem;
	border-radius: 30upx;
	height:40upx;
	line-height: 40upx;
	padding:0 25upx;
	z-index:999
}
.san{
	position: absolute;
	left: 0;
	bottom: -16upx;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20upx 0 20upx 20upx;
	
}
.line-one{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	//overflow: hidden;
	//text-overflow: ellipsis;
	//white-space: nowrap;
	white-space: nowrap;
	overflow: hidden;
}
.line-one span{
	display: inline-block;
}
.btn{
	border: 1px solid #FF0025;
	border-radius: 10rpx;
	width: 260rpx;
	padding: 8rpx 0;
	text-align: center;
	margin: 10rpx 20rpx;
	background: white;
	color: black;
}
.scrolling-content {

}
.scrolling-content span{
	animation: marquee 10s linear infinite;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
/* .san_unbuy{
	.san();
	border-color: transparent transparent transparent #F69E48;
}
.san_expire{
		.san();
		border-color: transparent transparent transparent #F16C6C;
} */
</style>
